<template>
    <n-avatar
        :size="size"
        :src="getStaticUrl(props.url)"
        :color="color"
        :img-props="{
            style: {
                objectFit: 'contain',
            },
        }"
        fallback-src="/icon/Group.png"
        preview-disabled></n-avatar>
</template>

<script setup lang="ts">
import { useResourceHelper } from '@/hooks'

const props = withDefaults(
    defineProps<{
        url: string
        size: number
        color: string
    }>(),
    {
        size: 20,
        url: '',
        color: '#ddd',
    },
)

const { getStaticUrl } = useResourceHelper()
</script>
